<template>
 <div class="rating_page">
      <head-top head-title="服务中心" :go-back=true></head-top>
   <section class="service_connect">
     <a href="https://ecs-im.ele.me/" class="service_left">
       <svg>
         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#human"></use>
       </svg>
       <span>在线客服</span>
     </a>
     <a href="tel:10105757" class="service_right">
       <svg>
         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#phone"></use>
       </svg>
       <span>在线客服</span>
     </a>
   </section>
   <section class="hot_questions" v-if="serviceData">
     <scroll class="warpper" :data=questionDetail>
       <div>
         <h4 class="qustion_header">热门问题</h4>
         <ul>
           <li v-for="(item, index) in questionTitle" :key="index" class="question_title" @click="toQuestionDetail(item, index)">
             <span>{{item}}</span>
             <i class="fa fa-angle-right"></i>
           </li>
         </ul>
       </div>
     </scroll>
   </section>
   <div class="loading-container" v-show="!questionTitle.length">
     <loading></loading>
   </div>
   <transition name="router-slid" mode="out-in">
     <router-view></router-view>
   </transition>
 </div>
</template>

<script type="text/ecmascript-6">
import headTop from 'components/header/head'
import {getService} from 'src/service/getData'
import loading from 'components/common/loading/loading'
import scroll from 'components/common/scroll/scroll'
import {mapMutations} from 'vuex'
  export default {
  data(){
     return{
       serviceData: null, //服务信息
       questionTitle: [], //问题标题
       questionDetail: [], //问题详情
     }
   },
   created(){
    this.initData();
   },
   mounted(){
   },
   computed: {
   },
   methods: {
     ...mapMutations([ 'SAVE_QUESTION']),
     toQuestionDetail(titile,index){
       this.SAVE_QUESTION({titile:titile,detail:this.questionDetail[index]});
       this.$router.push('/service/questionDetail');
     },
     async initData(){
       this.serviceData =await getService();
       //遍历数组对象标题key值
       Object.keys(this.serviceData).forEach(item=>{
         let avoidReapeat = false;
         this.questionTitle.forEach((inserItem)=>{
           if(inserItem=== this.serviceData[item]){
             avoidReapeat = true;
           }
         })
         //将标题和内容分别放进数组中
         if(item.indexOf('Caption')!==-1&& !avoidReapeat){
           this.questionTitle.push(this.serviceData[item]);
         }else if(!avoidReapeat){
           this.questionDetail.push(this.serviceData[item]);
         }
       })
     }
   },
   components:{
     scroll,
     loading,
    headTop
   }
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
@import '../../style/mixin';
@import '../../style/css/font-awesome.min.css';
.rating_page{
  background-color: #fff !important;
  padding-top: 1.95rem;
  p, span{
    font-family: Helvetica Neue,Tahoma,Arial;
  }
}
.warpper{
  position: fixed;
  top:4.95rem;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}
.service_connect{
  @include fj;
  a{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 3rem;
    border-bottom: 1px solid #f5f5f5;
    svg{
      @include wh(1rem, 1rem);
    }
    span{
      margin-top: .4rem;
      @include sc(.6rem, #666);
    }
  }

  .service_left{
    border-right: 1px solid #f5f5f5;
  }
}
.hot_questions{
  .qustion_header{
    @include sc(.75rem, #333);
    line-height: 3rem;
    border-bottom: 1px solid #f5f5f5;
    padding-left: .7rem;
  }
  .question_title{
    padding: 0 .7rem;
    line-height: 2rem;
    border-bottom: 1px solid #f5f5f5;
    @include fj;
    align-items: center;
    span{
      @include sc(.6rem, #666);
    }
   .fa{
     color: $icon;
     font-size: .8rem;
   }
  }
}
.router-slid-enter-active, .router-slid-leave-active {
  transition: all .4s;
}
.router-slid-enter, .router-slid-leave-active {
  transform: translate3d(2rem, 0, 0);
  opacity: 0;
}
</style>
